﻿<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
    <BitNav Items="basicNavItems" />
</DemoExample>

<DemoExample Title="FitWidth" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
    <BitNav Items="basicNavItems" FitWidth />
</DemoExample>

<DemoExample Title="Grouped" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
    <BitNav Items="carNavItems" RenderType="BitNavRenderType.Grouped" />
</DemoExample>

<DemoExample Title="Manual Mode" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
    <div>Basic</div><br />
    <BitNav Items="foodNavItems"
            DefaultSelectedItem="foodNavItems[0].ChildItems[2]"
            Mode="BitNavMode.Manual" />
    <br /><br /><br />
    <div>Two-Way Bind</div><br />
    <div class="example-box">
        <BitNav @bind-SelectedItem="SelectedItemNav"
                Items="foodNavItems"
                Mode="BitNavMode.Manual"
                OnSelectItem="(BitNavItem item) => SelectedItemText = FoodMenuDropdownItems.FirstOrDefault(i => i.Text == item.Text)?.Text" />
        <br />
        <BitDropdown @bind-Value="SelectedItemText"
                     FitWidth
                     Label="Select Item"
                     Items="FoodMenuDropdownItems"
                     OnSelectItem="(BitDropdownItem<string> item) => SelectedItemNav = Flatten(foodNavItems).First(i => i.Text == item.Value)" />
    </div>
</DemoExample>

<DemoExample Title="IconOnly" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
    <BitToggle @bind-Value="iconOnly" Label="Hide texts?" Inline />
    <br />
    <BitNav Items="iconOnlyNavItems" Mode="BitNavMode.Manual" IconOnly="iconOnly" />
</DemoExample>

<DemoExample Title="Custom Templates" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
    <div>Header Template (Grouped)</div><br />
    <BitNav Items="carNavItems" RenderType="BitNavRenderType.Grouped">
        <HeaderTemplate Context="item">
            <div class="nav-custom-header">
                <BitIcon IconName="@BitIconName.FavoriteStarFill" />
                <span>@item.Text</span>
            </div>
        </HeaderTemplate>
    </BitNav>
    <br /><br /><br />
    <div>Item Template</div><br />
    <BitNav Items="foodNavItems" Mode="BitNavMode.Manual">
        <ItemTemplate Context="item">
            <div class="nav-custom-item">
                <BitCheckbox />
                <BitIcon IconName="@item.IconName" />
                <span>@item.Text</span>
            </div>
        </ItemTemplate>
    </BitNav>
</DemoExample>

<DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
    <div class="example-box">
        <BitNav Items="foodNavItems"
                Mode="BitNavMode.Manual"
                OnItemClick="(BitNavItem item) => ClickedItem = item"
                OnSelectItem="(BitNavItem item) => SelectedItem = item"
                OnItemToggle="(BitNavItem item) => ToggledItem = item" />

        <div>
            <span>Clicked Item: <b>@ClickedItem?.Text</b></span><br />
            <span>Selected Item: <b>@SelectedItem?.Text</b></span><br />
            <span>Toggled Item: <b>@(ToggledItem is null ? "N/A" : $"{ToggledItem.Text} ({(ToggledItem.IsExpanded ? "Expanded" : "Collapsed")})")</b></span>
        </div>
    </div>
</DemoExample>

<DemoExample Title="AllExpanded & NoCollapse" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
    <BitNav Items="noCollapseNavItems" AllExpanded NoCollapse />
</DemoExample>

<DemoExample Title="Custom Styles" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
    <BitNav Items="customStyleNavItems"
            Styles="@(new() { ItemContainer = "border: 1px solid green; margin: 2px;",
                              ToggleButton = "color: cyan;",
                              Item = "color: red;",
                              ItemIcon = "color: gold; margin-right: 15px;" })" />
</DemoExample>

<DemoExample Title="RTL" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
    <div dir="rtl">
        <BitNav Dir="BitDir.Rtl" Items="rtlNavItems" />
    </div>
</DemoExample>